//流式布局
.flow-layout (@gap: 10px,@width: 50%) {
  margin-left: -@gap / 2;
  margin-right: -@gap / 2;
  > div,
  > img {
    float: left;
    width: @width;
    height: 100%;
    padding: 0px @gap / 2;
  }
}
/* 固定宽度，文字内容过长自动截断，并添加 ... 后缀 */
.text-overflow () {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.for(@list, @code) {
  & {
    .loop(@i:1) when (@i =< length(@list)) {
      @value: extract(@list, @i);

      @code();

      .loop(@i + 1);
    }

    .loop();
  }
}

.margin-default-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.margin- @{value}-default {margin- @{value}: @default-gap;}});
  .margin-all-default {
    margin: @default-gap;
  }
}

.padding-default-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.padding- @{value}-default {padding- @{value}: @default-gap;}});

  .padding-all-default {
    padding: @default-gap;
  }
}

.margin-little-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.margin- @{value}-little {margin- @{value}: @little-gap;}});
  .margin-all-little {
    margin: @little-gap;
  }
}

.pdding-little-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.pdding- @{value}-little {pdding- @{value}: @little-gap;}});
  .padding-all-little {
    padding: @little-gap;
  }
}

.margin-middle-loop() {
  @array: top, bottom, left, right;

  .for(
    @array,
    {.margin- @{value}-middle {margin- @{value}: @middle-gap;}}
  ) !important;
}

.padding-middle-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.padding- @{value}-middle {padding- @{value}: @middle-gap;}});
  .padding-all-middle {
    padding: @middle-gap;
  }
}

.margin-big-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.margin- @{value}-big {margin- @{value}: @big-gap;}});
}

.padding-big-loop() {
  @array: top, bottom, left, right;

  .for(@array, {.padding- @{value}-big {padding- @{value}: @big-gap;}});
  .padding-all-big {
    padding: @big-gap;
  }
}

.circle-before(@bg) {
  &:before {
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
    content: '';
    width: 8px;
    height: 8px;
    background-color: @bg;
  }
}

.custom-border-common(@color) {
  &,
  &:last-child {
    > td {
      border-top: 3px solid @color !important;
      border-bottom: 3px solid @color !important;
    }
    > td:first-child {
      border-left: 3px solid @color;
    }
    > td:last-child {
      border-right: 3px solid @color;
    }
  }
}

.border-hover-common(@color) {
  &,
  &:last-child {
    > td {
      border-top: 3px solid @color !important;
      border-bottom: 3px solid @color !important;
    }
    > td:first-child {
      border-left: 3px solid @color;
    }
    > td:last-child {
      border-right: 3px solid @color;
    }
  }
}
